Håndtering av hendelser for CSS Custom Highlight: Forbedre interaksjoner med tekstmarkering

Tekstmarkering er en fundamental interaksjon på nettet. Brukere markerer tekst av ulike årsaker: for å kopiere innhold, dele sitater, utføre søk eller bare for å fokusere oppmerksomheten. Mens nettlesere tilbyr standard tekstutheving, gir CSS Custom Highlight API en enestående kontroll over denne interaksjonen, og lar utviklere skape visuelt tiltalende, kontekstbevisste og svært tilgjengelige markeringssopplevelser. Dette blogginnlegget dykker ned i dybden av CSS Custom Highlight API, utforsker dets kapabiliteter og gir praktiske eksempler for å forbedre dine webapplikasjoner.

Forståelse av standardoppførselen for tekstmarkering

Som standard stiler nettlesere markert tekst ved hjelp av ::selection pseudo-elementet. Du kan endre background-color- og color-egenskapene for å endre utseendet. For eksempel:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Dette enkle CSS-utdraget endrer bakgrunnsfargen til en lys blå og tekstfargen til svart når en bruker markerer tekst på siden. Men ::selection-pseudo-elementet har begrensninger. Det tillater kun styling av bakgrunn og farge, noe som begrenser tilpasningen. I tillegg mangler det semantisk informasjon om markeringskonteksten. CSS Custom Highlight API overvinner disse begrensningene.

Introduksjon til CSS Custom Highlight API

CSS Custom Highlight API gir en mer robust og fleksibel tilnærming til å håndtere tekstmarkeringer. Det introduserer nye CSS-egenskaper og JavaScript-API-er som lar deg definere og style egendefinerte uthevinger basert på spesifikke betingelser og interaksjoner.

Nøkkelkonsepter

• Uthevingsarv: Uthevinger styles gjennom en kaskade- og arvemekanisme som ligner på andre CSS-egenskaper. Dette betyr at du kan definere standard uthevingsstiler på rotnivå og overstyre dem for spesifikke elementer eller kontekster.
• Uthevings-pseudo: ::highlight()-pseudo-elementet brukes for å anvende stiler på navngitte uthevinger.
• JavaScript-API: JavaScript-API-er som getSelection() og Highlight-objekter lar deg programmatisk opprette, administrere og interagere med uthevinger.
• Tilgjengelighet: API-et støtter ARIA-attributter og tilgjengelighetshensyn, og sikrer at egendefinerte uthevinger er observerbare og forståelige for brukere med nedsatt funksjonsevne.

Implementering av egendefinerte uthevinger: En trinn-for-trinn-guide

Her er en praktisk guide for å implementere egendefinerte uthevinger ved hjelp av CSS Custom Highlight API:

Trinn 1: Definere navngitte uthevinger

Først må du definere en navngitt utheving ved hjelp av CSS. Dette navnet vil bli brukt til å assosiere stiler med spesifikke markeringer.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

I dette eksempelet har vi definert en utheving kalt `custom-highlight` med en semi-transparent rød bakgrunn og svart tekstfarge. Du kan velge hvilken som helst gyldig CSS-fargeverdi for bakgrunnen og teksten.

Trinn 2: Opprette uthevinger i JavaScript

Deretter bruker du JavaScript til å opprette og anvende uthevingen. Dette innebærer å hente det markerte tekstområdet og opprette et Highlight-objekt.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // Ingen markering
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Tom markering
  }

  const highlight = new Highlight(range);

  // Registrer uthevingen i dokumentet. Dette er eksperimentelt og kan kreve polyfill eller nettleserflagg
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implementer en reservemekanisme her, f.eks. ved å pakke den markerte teksten inn i et  med en klasse
    // For eksempel:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Valgfritt: Fjern markeringen etter utheving
}

            

              
                Copy
              
            
          

Forklaring:

• window.getSelection(): Henter det nåværende markeringsobjektet.
• selection.rangeCount: Sjekker om det er en aktiv markering.
• selection.getRangeAt(0): Henter det markerte området.
• new Highlight(range): Oppretter et nytt `Highlight`-objekt fra området.
• CSS.highlights.set('custom-highlight', highlight): Registrerer uthevingen i CSS-uthevingsregisteret. Dette er det avgjørende trinnet som kobler JavaScript-uthevingen til CSS-stilene som ble definert tidligere.
• Reservemekanisme: Inkluderer en avgjørende reservemekanisme for nettlesere som ennå ikke fullt ut støtter `CSS.highlights`. Dette sikrer at funksjonen din degraderer elegant og opprettholder funksjonalitet på eldre nettlesere.
• selection.removeAllRanges(): Fjerner markeringen etter utheving. Dette er valgfritt og avhenger av ønsket brukeropplevelse.

Husk å koble denne funksjonen til en hendelseslytter, som et knappeklikk eller en tastatursnarvei.

Trinn 3: Håndtering av flere områder (overlappende markeringer)

API-et kan håndtere flere overlappende områder innenfor en enkelt utheving. Du kan legge til flere områder i et `Highlight`-objekt:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implementer en reserve for flere områder (mer komplekst)
  // Dette vil kreve at teksten deles opp i mindre spans og at stiler anvendes
  // Dette er en mer avansert reserveimplementering og er kanskje ikke egnet i alle tilfeller
}

            

              
                Copy
              
            
          

Stylingen vil bli anvendt på alle områder innenfor uthevingen.

Avanserte bruksområder og teknikker

CSS Custom Highlight API åpner opp for et bredt spekter av muligheter for å forbedre interaksjoner med tekstmarkering. Her er noen avanserte bruksområder og teknikker:

1. Kontekstbevisst utheving

Du kan bruke JavaScript til å analysere den markerte teksten og anvende forskjellige uthevingsstiler basert på innholdet eller den omkringliggende konteksten. For eksempel kan du utheve nøkkelord i et dokument med en spesifikk farge, eller identifisere og utheve kodeutdrag.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Uthev kodekommentarer
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Uthev JavaScript-nøkkelord
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Reserveimplementering, potensielt ved bruk av data-attributter og egendefinert CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definer CSS-stiler for hver uthevingstype:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Utheving av søkeresultater

Du kan bruke API-et til å utheve søkeord i et dokument. Dette er spesielt nyttig for søkeresultatsider eller søkefunksjonalitet i appen.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Eller spesifikt element
  const regex = new RegExp(searchTerm, 'gi'); // Global, skiller ikke mellom store og små bokstaver

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Opprett et område for hvert treff
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Reserve, igjen, krever forsiktig håndtering av tekstnoder
    }
  }
}

            

              
                Copy
              
            
          

Definer CSS-stilen for uthevingen av søkeresultater:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. Integrering med Shadow DOM

CSS Custom Highlight API fungerer sømløst med Shadow DOM, noe som lar deg lage innkapslede komponenter med egendefinerte uthevingsstiler. Du kan definere uthevinger innenfor Shadow DOM og anvende dem på elementer i komponenten.

4. Tilgjengelighetshensyn

Sørg for at dine egendefinerte uthevinger er tilgjengelige for alle brukere. Vurder følgende:

• Fargekontrast: Sørg for tilstrekkelig fargekontrast mellom uthevingens bakgrunn og tekstfarge for å oppfylle WCAG-retningslinjene.
• Tastaturnavigasjon: Sørg for at brukere kan navigere i uthevet tekst ved hjelp av tastaturet.
• Skjermleserkompatibilitet: Test uthevingene dine med skjermlesere for å sikre at den markerte teksten blir lest opp korrekt.
• Fokusindikatorer: Når et uthevet element mottar fokus, gi en tydelig visuell fokusindikator.

Du kan bruke ARIA-attributter for å gi ytterligere semantisk informasjon om uthevingene. For eksempel kan du bruke aria-label for å beskrive formålet med en uthevet seksjon.

5. Lokalisering og internasjonalisering

Når du håndterer tekstmarkering i en global kontekst, bør du vurdere følgende:

• Tekstretning: Sørg for at uthevingene dine fungerer korrekt med både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) tekstretninger.
• Språkspesifikke regler: Vær oppmerksom på språkspesifikke regler for tekstmarkering og ordgrenser.
• Skrifttypestøtte: Bruk skrifttyper som støtter tegnene som brukes i forskjellige språk.

6. Ytelsesoptimalisering

Anvendelse av egendefinerte uthevinger kan påvirke ytelsen, spesielt på store dokumenter. Vurder følgende optimaliseringsteknikker:

• Debouncing: Bruk 'debounce' på uthevingsfunksjonen for å unngå overflødige beregninger under raske markeringer.
• Mellomlagring: Mellomlagre beregnede uthevingsområder for å unngå å beregne dem på nytt unødvendig.
• Virtualisering: Bruk virtualiseringsteknikker for å bare rendere uthevinger som er synlige i visningsområdet.
• Web Workers: Overfør uthevingsberegninger til en web worker for å unngå å blokkere hovedtråden.

Nettleserstøtte og polyfills

CSS Custom Highlight API er relativt nytt og støttes kanskje ikke fullt ut av alle nettlesere. Sjekk de nyeste nettleserkompatibilitetstabellene før du bruker det i produksjon. Vurder å bruke en polyfill for å gi støtte til eldre nettlesere. En polyfill legger til den nødvendige koden slik at eldre nettlesere kan forstå det nye API-et. Søk på nettet etter 'CSS Custom Highlight API Polyfill' for å finne alternativer.

Konklusjon

CSS Custom Highlight API gir utviklere mulighet til å skape engasjerende, kontekstbevisste og tilgjengelige opplevelser med tekstmarkering. Ved å forstå API-ets kapabiliteter og anvende teknikkene beskrevet i dette blogginnlegget, kan du heve brukeropplevelsen til dine webapplikasjoner og tilby en mer intuitiv og visuelt tiltalende måte for brukere å interagere med tekst. Husk å prioritere tilgjengelighet og ytelse når du implementerer egendefinerte uthevinger, og å vurdere nettleserkompatibilitet og polyfill-alternativer. Denne nyanserte kontrollen over tekstmarkering gir utviklere mulighet til å bygge mer interaktive og brukervennlige webopplevelser, skreddersydd for spesifikke applikasjonsbehov og brukerpreferanser. Etter hvert som nettleserstøtten vokser, lover CSS Custom Highlight API å bli et uunnværlig verktøy for moderne webutvikling.

Videre utforskning

• MDN Web Docs: Highlight API
• CSS Houdini: Lær mer om CSS Houdini-prosjektet som muliggjør disse avanserte CSS-funksjonene.